<template>
    <user-dialog class="menuForm" :title="props.title" :show="props.show" @close="close" @submit="submit">
        <el-form :model="menuData" :rules="rules" ref="userForm" label-width="100">
            <el-form-item label="父级菜单" prop="parentId">
                <el-cascader v-model="menuData.parentId" :options="props.menu" clearable
                    :props="{checkStrictly:true,value:'menuId',label:'menuName'}">
                </el-cascader>
                <span style="margin-left:20px;color:gray;">不选择，直接创建创建一级菜单</span>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="menuData.menuType">
                    <el-radio :label="1">{{MenuType[1]}}</el-radio>
                    <el-radio :label="2">{{MenuType[2]}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="menuData.menuName" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" prop="icon" v-show="menuData.menuType==1">
                <el-input v-model="menuData.icon" placeholder="请输入菜单图标"></el-input>
            </el-form-item>
            <el-form-item label="路由地址" prop="path" v-show="menuData.menuType==1">
                <el-input v-model="menuData.path" placeholder="请输入路由地址"></el-input>
            </el-form-item>
            <el-form-item label="权限标识" prop="menuCode" v-show="menuData.menuType==2">
                <el-input v-model="menuData.menuCode" placeholder="请输入权限标识"></el-input>
            </el-form-item>
            <el-form-item label="组件路径" prop="component" v-show="menuData.menuType==1">
                <el-input v-model="menuData.component" placeholder="请输入组件路径"></el-input>
            </el-form-item>
            <el-form-item label="菜单状态" prop="menuState" v-show="menuData.menuType==1">
                <el-radio-group v-model="menuData.menuState">
                    <el-radio :label="1">{{MenuState[1]}}</el-radio>
                    <el-radio :label="2">{{MenuState[2]}}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </user-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, watch, computed, PropType, nextTick } from 'vue'
import userDialog from "@/components/Dialog.vue"
import type { FormInstance, FormRules } from "element-plus"
import { MenuState, MenuType } from "@/utils/enum"
import { MenuForm, MenuRow } from "@/interface/menu"

const props = defineProps({
    show: {
        type: Boolean,
        default: true,
        required: true
    },
    title: {
        type: String,
        default: '新增菜单',
        required: true
    },
    menuFormData: Object as PropType<MenuRow>,
    menu: Array,
    type: String,
    parentId: Array
})
let menuData = ref<MenuForm>({
    parentId: [],
    menuType: 1,
    menuName: "",
    icon: "",
    path: "",
    menuCode: "",
    component: "",
    menuState: 1,
})

// 监听是新增还是编辑
watch(() => props.type, (newValue, oldValue) => {
    let action = newValue ? newValue : 'add'
    console.log(action)
    if (action === 'edit') {
        nextTick(() => {
            menuData.value = props.menuFormData as MenuRow
            console.log('打印menuData', menuData.value)
        })
    }
}, { immediate: true })
watch(() => props.parentId, (v) => {
    console.log('得到的值', v)
    if (v) {
        menuData.value.parentId = v as string[]
    }
})

// 表单设置
const userForm = ref<FormInstance>()
const rules = reactive<FormRules>({
    menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 10, message: "长度在2-8个字符", trigger: "blur" }],
})


const emits = defineEmits(["close", "submit"])
const close = () => {
    userForm.value?.resetFields()
    emits("close")
}
const submit = () => {
    userForm.value?.validate((valid: boolean) => {
        if (valid) {
            const params = Object.assign({}, menuData.value)
            emits("submit", params)
            setTimeout(() => {
                close()
            }, 0)
        }
    })
}
</script>
<style lang='scss' scoped>
.el-dialog__header {
    border-bottom: 1px solid red;
}
</style>